<script setup>
import { inject, ref } from "vue";
import { videoDetails, videoLike } from "@/services/video";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { formatNumber } from "@/utils/desensitization";

onLoad((e) => {
  video_id.value = e.id;
});

onShow(() => {
  videoDetailsFun();
});

const video_id = ref("");
const cardobj = ref({});
const relation = ref(null);

const videoDetailsFun = async () => {
  try {
    let res = await videoDetails({ id: video_id.value });
    cardobj.value = res.data;
    relation.value = res.data.relation;

    if (res.data.relation) {
      islike.value = true;
    } else {
      islike.value = false;
    }
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

// 点赞
const islike = ref(false);
const videoLikeFun = async () => {
  try {
    let res = await videoLike({ video_id: video_id.value });
    islike.value = !islike.value;
    islike.value
      ? (cardobj.value.like_num += 1)
      : (cardobj.value.like_num -= 1);

    uni.showToast({
      title: islike.value ? "点赞成功" : "取消点赞",
      icon: "none",
    });
  } catch (e) {
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};
</script>

<template>
  <view class="content">
    <view class="video-card">
      <video
        v-if="cardobj.link"
        id="myVideo"
        :src="cardobj.link"
        @error="videoErrorCallback"
        controls
        :poster="cardobj.image"
        objectFit="cover"
      ></video>
    </view>
    <view class="video-item">
      <view class="video-title">{{ cardobj.title }}</view>
      <view class="item-list-text">
        <text>阅读：{{ formatNumber(cardobj.read_num) }}</text>
        <text class="middle-text">{{ cardobj.create_time }}</text>
        <text>作者：{{ cardobj.name }}</text>
      </view>
    </view>

    <view class="video-text">
      视频介绍：
      <view class="video-box">
        <view class="box-content">
          <image
            :src="islike ? '/static/home/like2.png' : '/static/home/like1.png'"
            mode="aspectFill"
            @click="videoLikeFun"
          />
          <text>{{ formatNumber(cardobj.like_num) }}</text>
        </view>
      </view>
    </view>
    <view class="video-list">
      <up-parse :content="cardobj.content"></up-parse
    ></view>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
